<template>
    <div id="">
        <div class="div">
          <div>您的车辆类型有:</div>
          <ul class="ul">
            <li v-for="item in company" >
              <div>
               <!-- <span>{{item.manufacturing_company}} </span>
                <span>{{item.model_of_car}}</span>
                &lt;!&ndash; 根据车辆类型 的长度来判断 该类型车辆的个数&ndash;&gt;
                <span>{{item.road_toll}}辆</span>-->

                <!--<span>{{item.lin}}</span>-->
                <span>{{item.name}} </span>
                <!-- 根据车辆类型 的长度来判断 该类型车辆的个数-->
                <span>{{item.totalNum}} 辆</span>
              </div>
            </li>
          </ul>

        </div>
    </div>
</template>

<script>
    export default {
        name: "vehicle_type",
      props:['userName'],
      data(){
          return{
            company:[], //品牌
            type:[] ,//车辆类型
            shu:'',
            xiangqing:[],
            ss:[]
          }
      },
      created(){
          this.getchusi();
      },
      methods:{
        //请求初始信息
        getchusi:function () {
          this.$http.get('/api/user/referVehicle',).then(function(response){
            this.xiangqing  = response.body; //把用户数据 传给数组.xiangqing

            this.shu = this.userName.name;
            //console.log(this.xiangqing);
            var arr = new Array;
            //判断两个name是否相等，等于则提取出来
            for(var j=0;j<this.xiangqing.length;j++){
              if(this.userName.name==this.xiangqing[j].owner){
                arr.push(this.xiangqing[j]);
                console.log(arr)
                this.ss = arr;
              }
            }
            //console.log(this.ss);


            //判断的是所有车辆数据
            var tmp =[];
            var tmpObj=[];
            /*console.log(tmp);*/
            for(var i=0;i<this.ss.length;i++){
              var pinp = this.ss[i].manufacturing_company;
              var com = this.ss[i].model_of_car;
              var index = tmp.indexOf(com);
              if(index!=-1){
                tmpObj[index].totalNum += +(this.ss[i].model_of_car.length/3);
              }else{
                tmpObj.push({'lin':pinp,'name':com,'totalNum':+(this.ss[i].model_of_car.length/3)});
                tmp.push(com);
              }
            }
            this.company = tmpObj;
          })


/*            var tmp =[];
            var tmpObj=[];
            console.log(tmp);
            for(var i=0;i<response.body.che.length;i++){
              var com = response.body.che[i].manufacturing_company
              var index = tmp.indexOf(com);
                  if(index!=-1){
                    tmpObj[index].totalNum += +(response.body.che[i].road_toll);
                  }else{
                    tmpObj.push({'name':com,'totalNum':+(response.body.che[i].road_toll)});
                    tmp.push(com);
                  }
            }*/

        /*  var tmp =[];
          var tmpObj=[];
          console.log(tmp);
          for(var i=0;i<response.body.che.length;i++){
            var pinp = response.body.che[i].manufacturing_company;
            var com = response.body.che[i].model_of_car;
            var index = tmp.indexOf(com);
            if(index!=-1){
              tmpObj[index].totalNum += +(response.body.che[i].model_of_car.length/3);
            }else{
              tmpObj.push({'lin':pinp,'name':com,'totalNum':+(response.body.che[i].model_of_car.length/3)});
              tmp.push(com);
            }
          }
          this.company = tmpObj;*/

         // })
        }

      }
    }
</script>

<style scoped>

  .div{
    font-size: 20px;
    padding: 50px;color: black}
  .ul{
    padding: 20px 30px;
  }
  .ul li{
    font-size: 16px;
    margin-bottom: 6px;
  }
</style>
